.container {
    font-size: 10px;
    position: fixed;
    background: #ffffff;
    z-index: 9999;
    top: 0;
    width: 100%;
    left: 0;

    .country {
        width: 100%;

        .scrollerHook {
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            width: 100%;
            height: calc(~"100vh - 1.32rem");

            .letterGroup {
                .letter {
                    background: #eee;
                    font-size: .34rem;
                    padding: 0 .3rem;
                    height: .6rem;
                    line-height: .6rem;
                }
            }

            .countryItems {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                background: #ffffff;
                line-height: 50px;
                height: 50px;
                padding: 0 .5rem 0 .3rem;
                .countryName{
                    font-size: .34rem;
                }

                .countryCode{
                    font-size: .3rem;
                    color: #c0c0c3;
                }

                .noResult {
                    font-size: .34rem;
                    color: #c0c0c3;
                }

                &:after {
                    content: '';
                    background:#D9D9D9;
                    left: .3rem;
                    right: .5rem;
                    height: 1px;
                    position: absolute;
                    bottom: 0;
                    transform: scaleY(.5);
                }

                &:last-child:after {
                    display: none;
                }
            }
        }
        .shortcut {
            position: absolute;
            top: 20%;
            right: 0;
            width: .3rem;
            text-align: center;
            padding-left: .06rem;

            .letters {
                color: #169bd9;
                -moz-user-select:none;
                -webkit-user-select:none;
                user-select:none;
            }
        }
    }

    &.containerEnter {
        transition: transform 1.5s linear;
        transform: translateY(-120%);

        &.containerEnterActive {
            transform: translateY(0);
        }
    }

    &.containerLeave {
        transform: translateY(0);

        &.containerLeaveActive {
            transform: translateY(-120%);
        }
    }
}

.container.show {
    animation-name: show;
    animation-duration: .5s;
}

.container.leave {
    animation-name: leave;
    animation-duration: .5s;
}

@keyframes show {
    from {
        transform: translate3d(200%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes leave {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(200%, 0, 0);
    }
}
